<template>
  <view class="main_account">
    <view id="account-number" style="overflow: hidden;">
      <!-- 当没有收款账号时会显示提示页面 -->
      <view class="pd_t_74" v-if="!accountList.length">
        <navigator url="/pages/user/add_account" class="text-cent pd_t_74">
          <u-icon name="plus-circle-fill" size="72" color="#2A6AAA"></u-icon>
        </navigator>
        <view class="font-26 col-666 text-cent pd_t_60 pd_b_10">您还没有添加收款账户</view>
        <view class="font-26 col-666 text-cent">点击右上方按钮添加</view>
      </view>
      <!-- 收款账号页面 -->
      <view v-for="(item,index) in accountList"
           :key="index"
           class="row bg-fff content pd_t_30 pd_b_30 mg_l_20 mg_r_20 mg_t_20"
           v-else>
        <view v-if="item.type == 1" class="pd_l_30 collection-icon">
          <image src="https://app.zbzedu.com/static/WaChat/img/yinlian.png" />
        </view>
        <view v-if="item.type == 2" class="pd_l_30 collection-icon">
          <image src="https://app.zbzedu.com/static/WaChat/img/zfb.png" />
        </view>
        <view class="flex-1 pd_l_20">
          <view v-if="item.type == 1" class="font-28 font-b col-333 pd_b_20">{{item.bankCategory}}</view>
          <view v-if="item.type == 2" class="font-28 font-b col-333 pd_b_20">支付宝</view>
          <view class="font-26 col-333">
            {{item.accountNo.substr(0, 3)}}****{{item.accountNo.substr(item.accountNo.length-4, item.accountNo.length)}}
          </view>
        </view>
        <view class="pd_r_30 more-icon row" style="justify-content: space-between;width: 150upx">
          <u-icon name="edit-pen-fill" size="42" color="#2A6AAA" @click="openWindow('/pages/user/add_account', item)"></u-icon>
          <u-icon name="close-circle-fill" size="42" color="#999" @click="deleteData(item.id)"></u-icon>
        </view>
      </view>
    </view>
    <div class="bg-fff btn-container pd_t_19 pd_b_20">
      <u-button type="primary" :custom-style="customStyle" shape="circle" @click="openWindow('/pages/user/add_account')">添加账户</u-button>
    </div>
  </view>
</template>

<script>
  import {request} from "../../util/api";
  import {getCurrentFullPath, TOAST} from "../../util/util";
  import {THEME} from "../mixins/config";

  export default {
    name: "",
    data() {
      return {
        accountList: [],
        show: false,
        showIndex: '',
        customStyle: {
          background: THEME.btn_active_bg_color,
          padding: '0 30rpx'
        },
      }
    },
    onShow() {
      this.getAccounts()
    },
    methods: {
      getAccounts() {
        var that_ = this;
        request({
          url: '/app/userCenter/getAccounts'
        }).then(ret => {
          that_.accountList = ret.data;
        })
      },

      deleteData(id) {
        var that_ = this;
        request({
          url: '/app/userCenter/delAccount',
          data: {
            id: id
          }
        }).then(ret => {
          TOAST('删除成功');
          that_.getAccounts();
        })
      },

      openWindow(path, list) {
      	if (list) {
      		setTimeout(() => {
            uni.$emit('account_info', {
              info: list
            })
          }, 300)
        }
        this.$u.route({
          url: path
        })
      }
    },
    onShareAppMessage(res) {
      return {
        path: getCurrentFullPath()
      }
    }
  }
</script>

<style lang="scss">
  .main_account {
    background: #f7f7f7;
    min-height: 100%;
    padding-bottom: 120upx;
    .content {
      border-radius: 12upx;
    }
    .collection-icon {
      width: 70upx;
      height: 40upx;
      line-height: 0;
      margin-right: 20upx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .btn-container {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      padding-left: 30upx;
      padding-right: 30upx;
      box-shadow: 1px 8px 16px 0px rgba(0, 0, 0, 0.47);
    }
  }
</style>
